<template>
    <div id="tmpl">
        <!-- <mt-header fixed title="看看世界">
            <router-link to slot="left">
        <mt-button icon="back" @click="$router.back(-1)"></mt-button>-->
        <!-- 返回上一页 -->
        <!-- </router-link>
        </mt-header>-->
        <div class="tabBar">
            <button @click="changeTab" data-tit="news">新闻</button>
            <button @click="changeTab" data-tit="car">汽车</button>
            <button @click="changeTab" data-tit="money">财经</button>
        </div>
        <mt-tab-container v-model="active">
            <mt-tab-container-item :id="showMsg.news">
                <mt-cell v-for="(n,i) in 10" title="tab-container 1" :key="i"></mt-cell>
            </mt-tab-container-item>
            <mt-tab-container-item :id="showMsg.car">
                <mt-cell v-for="(n,i) in 5" title="tab-container 2" :key="i"></mt-cell>
            </mt-tab-container-item>
            <mt-tab-container-item :id="showMsg.money">
                <mt-cell v-for="(n,i) in 7" title="tab-container 3" :key="i"></mt-cell>
            </mt-tab-container-item>
        </mt-tab-container>

        <!-- | datefmt('YYYY-MM-DD HH:mm:ss') -->
    </div>
</template>
<script>
// 提示框, 左右滑动栏
import { TabContainer, TabContainerItem } from "mint-ui";
// Vue.component(TabContainer.name, TabContainer);
// Vue.component(TabContainerItem.name, TabContainerItem);
// import common from "../../kits/common.js";
export default {
    data() {
        return {
            tech_list: [], // 新闻列表
            auto_list: [],
            money_list: [],
            sports_list: [],
            dy_list: [],
            war_list: [],
            ent_list: [],
            toutiao_list: [],
            active: "active",
            showMsg: { news: "active", car: "", money: "" }
        };
    },
    created() {
        //vue对象加载完自动调用
        this.getnewslist();
    },
    methods: {
        changeTab(e) {
            var that = this
            var tit = e.target.dataset.tit;
            if(that.showMsg[tit] == 'active'){
                return;
            }
            for(let k in that.showMsg){
                if(tit == k){
                    that.showMsg[k] = that.active
                    continue;
                }
                that.showMsg[k]= ''
            }
        },
        //获取api中新闻资讯的数据
        getnewslist() {
            //   获取API中的资源
            // var url = "journalismApi";
            // 利用$http的get方法来获取数据
            this.$http.get("journalismApi").then(function(res) {
                // 获取到相应报文体数据格式如下(本质上是一个对象)

                let body = res.body; //res.body 就是所有数据

                //  判断响应报文体中的状态值  如果code！=200 则将服务器响应回来的错误消息提示给用户
                if (body.code != 200) {
                    this.$toast(body.msg);
                    return;
                }
                // 如果数据正常 将 message 数据赋值给 this.list
                this.tech_list = body.data.tech;
                this.auto_list = body.data.auto;
                this.money_list = body.data.money;
                this.sports_list = body.data.sports;
                this.dy_list = body.data.dy;
                this.war_list = body.data.war;
                this.ent_list = body.data.ent;
                this.toutiao_list = body.data.toutiao;
                // console.log(this.tech_list);
            });
        },
        scrollHideTab(e) {
            this.$scrollHidden(e);
        },
        scrollHideTit(e) {}
    },
    computed: {
        // 计算属性
        activeUsers: function() {
            return this.users.filter(function(user) {
                return user.picInfo[0];
            });
        }
    }
};
</script>
<style scoped>
#app-container #tmpl {
    padding-top: 0;
}
.mui-table-view img {
    height: 90px;
    width: 90px;
}
.mui-table-view .mui-table-view-cell {
    padding: 0 15px;
}
.mui-table-view .news-list-link {
    margin: 0;
    padding: 11px 0;
    position: relative;
}
.mui-table-view .news-list-link:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #c8c7cc;
}
.mui-table-view .mui-table-view-cell:nth-last-child(1) .news-list-link:after {
    content: unset;
}
.mui-table-view-cell:after {
    content: unset;
}
.mui-table-view .mui-media-object {
    max-width: 90px;
    line-height: 90px;
}
.ft {
    margin-top: 0.5em;
    font-size: 12px;
    color: #0094ff;
}
/* .ft span.click { */
/* float: right; */
/* margin-left: 20px; */
/* } */
.list_title {
    color: #0094ff;
    padding: 10px;
    margin: 0;
    text-align: center;
    /* border-bottom: 1px solid #c8c7cc; */
}
.news {
    height: 100%;
    overflow: scroll;
}
.news-title {
    font-weight: bold;
}
.mui-ellipsis {
    color: #808080;
    font-size: 12px;
}
</style>

